<template>
	<div class="carousel">
		<el-carousel :interval="5000" arrow="always" height="400px">
			<el-carousel-item v-for="item in 4" :key="item">
				<div class="carousel-box">
					<img src="@/assets/images/news/v001.jpg" alt="">
					<div class="desc">校园论坛{{item}}</div>
				</div>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
export default {
	name: 'Carousel',
	data() { 
		return {

		}
	}
}
</script>

<style lang="scss" scoped>
.carousel {
	width: 100%;
	padding-bottom: 30px;
	.carousel-box {
		position: relative;
		width: 100%;
		height: 400px;
		img {
			width: 100%;
			height: 400px;
		}
		.desc {
			position: absolute;
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			background-color: rgba(0,0,0,0.7);
			left: 0;
			bottom: 0;
			z-index: 99;
			color: #fff;
			padding: 0 24px;
		}
	}
}
</style>